<template>
<div v-loading="loading">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Main' }" >首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'ResignationView' }" >离职办理</el-breadcrumb-item>
        <el-breadcrumb-item >离职添加</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
    >
    <el-form-item label="部门:" prop="DepartmentId">
      <el-select v-model="ruleForm.DepartmentId" placeholder="请选择部门" style="width: 300px" @change="handePosition">
        <el-option v-for="item in Department" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="职位:" prop="PositionId">
      <el-select v-model="ruleForm.PositionId" placeholder="请选择职位" style="width: 300px" @change="handestaff">
        <el-option v-for="item in Position" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="员工姓名:" prop="StaffId">
      <el-select v-model="ruleForm.StaffId" placeholder="请选择员工" style="width: 300px" @change="handePrincipal">
        <el-option v-for="item in Staff" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="上级负责人:" prop="PrincipalId">
      <el-select v-model="ruleForm.PrincipalId" placeholder="请选择上级负责人" style="width: 300px" @change="handePri">
        <el-option v-for="item in Principal" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="入职日期:" prop="Hiredate">
      <el-date-picker
        v-model="ruleForm.Hiredate"
        type="date"
        placeholder="请输入入职日期"
        style="width: 300px"
        @change="DateChand"
      />
    </el-form-item>
     <el-form-item label="最后工作日:" prop="LastDay">
      <el-date-picker
        v-model="ruleForm.LastDay"
        type="date"
        placeholder="请输入入职日期"
        style="width: 300px"
        @change="DateChands"
      />
    </el-form-item>
    <el-form-item label="离职原因:" prop="ResignationWey">
        <el-input
            v-model="ruleForm.ResignationWey"
            style="width: 300px"
            :rows="2"
            type="textarea"
            placeholder="请输入备注"
        />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交审核
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitFormed(ruleFormRef)">
            保存草稿
        </el-button>
        </el-form-item>
    </el-form>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { TableInstance } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const router = useRouter();

const Department = ref([
    { label: '人事部', value: 1 },
    { label: '市场部', value: 2 },
    { label: '财务部', value: 3 },
])

const Positions = ref([
    { label: '部长', value: 1, Parent: 1 },
    { label: '副部长', value: 2, Parent: 1 },
    { label: '经理', value: 3, Parent: 1 },
    { label: '部长', value: 4, Parent: 2 },
    { label: '副部长', value: 5, Parent: 2 },
    { label: '经理', value: 6, Parent: 2 },
    { label: '部长', value: 7, Parent: 3 },
    { label: '副部长', value: 8, Parent: 3 },
    { label: '经理', value: 9, Parent: 3 },
])

const Position = ref()

const handePosition = (item: any) => {
    ruleForm.PositionId = null;
    ruleForm.StaffId = null;
    ruleForm.PrincipalId = null;
    Position.value = Positions.value.filter(positions => positions.Parent == item);
    const selectedPosition = Department.value.find(position => position.value === item);
    if (selectedPosition) {
        ruleForm.Department = selectedPosition.label;
    }    
}

interface stafff{
    value: number,
    label: string
}
const Staff = ref<stafff[]>([])

const handestaff = (item: any) => { 
    ruleForm.StaffId = null;
    axios.get("/pread/api/ReadRegister/GetUserResignation?PositionId="+item).then(res => {
        Staff.value = res.data.Data
    })
    const selectedPosition = Position.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.Position = selectedPosition.label;
    }
}

const Principal = ref()

const handePrincipal = (item: any) => {
    ruleForm.PrincipalId = null;
    axios.get("/pread/api/ReadRegister/GetPrincipals", {
        params: {
            DepartmentId: ruleForm.DepartmentId,
            StaffId: item
        }
    }).then(res => {
        Principal.value = res.data.Data
    })

    const selectedPosition = Staff.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.StaffName = selectedPosition.label;
    }
}

const handePri = (item:any) => {
    const selectedPosition = Principal.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.Principal = selectedPosition.label;
    }
}
    
interface RuleForm {
    Id:number,
    Guid: string,
    DepartmentId: number | null,
    Department: string,
    PositionId: number | null,
    Position: string,
    StaffId: number | null,
    StaffName: string,
    PrincipalId: number | null,
    Principal: string,
    Hiredate: Date | null,
    Remarks: string|null,
    AppStatusL: string,
    Approver: string,
    CreatedBy: string,
    CreatedDate: Date | null,
    AppRemarks: string | null,
    AppStatus: string,
    LastDay: Date | null,
    ResignationWey: string | null,
    ApplicationDate: string | null,
    WorkSummary: string | null,
    Opinion: string | null,
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    Id: 0,
    Guid: "235345",
    DepartmentId: null,
    Department: "",
    PositionId: null,
    Position: "",
    StaffId: null,
    StaffName: "",
    PrincipalId: null,
    Principal: "",
    Hiredate: null,
    Remarks: null,
    AppStatusL: "",
    Approver: "-",
    CreatedBy: localStorage.username,
    CreatedDate: new Date,
    AppRemarks: null,
    AppStatus: "",
    LastDay: null,
    ResignationWey: "",
    ApplicationDate:null,
    WorkSummary: null,
    Opinion: null,
})

const rules = reactive<FormRules<RuleForm>>({
    DepartmentId: [        
        {
            required: true,
            message: '部门不能为空',
            trigger: 'change',
        }
    ],
    PositionId: [        
        {
            required: true,
            message: '职位不能为空',
            trigger: 'change',
        }
    ],
    StaffId: [        
        {
            required: true,
            message: '员工不能为空',
            trigger: 'change',
        }
    ],
    PrincipalId: [        
        {
            required: true,
            message: '上级负责人不能为空',
            trigger: 'change',
        }
    ],
    LastDay: [
        { required: true, message: '最后工作日不能为空', trigger: 'blur' },
    ],
    ResignationWey: [
        { required: true, message: '离职原因不能为空', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            ruleForm.AppStatus = "待审批"
            axios.post("/pwrite/api/ResignationManage/AddResignationManage", ruleForm).then(res => {
                if (res.data.Data > 0) {
                    loading.value = false
                    ElMessage({
                        message: "提交成功",
                        type: "success",
                        duration:1000
                    })
                    router.push("ResignationView")
                } else {
                    loading.value = false
                    ElMessage({
                        message: "提交失败",
                        type: "warning",
                        duration:1000
                    })
                    router.push("ResignationView")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const submitFormed = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            ruleForm.AppStatus = "待提交"
            axios.post("/pwrite/api/ResignationManage/AddResignationManage", ruleForm).then(res => {
                if (res.data.Data > 0) {
                    loading.value = false
                    ElMessage({
                        message: "提交成功",
                        type: "success",
                        duration:1000
                    })
                    router.push("ResignationView")
                } else {
                    loading.value = false
                    ElMessage({
                        message: "提交失败",
                        type: "warning",
                        duration:1000
                    })
                    router.push("ResignationView")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
  router.push("ResignationView")
}

const DateChand = (date:any) => {
    const localDate = date.toLocaleString(); 
    ruleForm.Hiredate = localDate
}

const DateChands = (date:any) => {
    const localDate = date.toLocaleString(); 
    ruleForm.LastDay = localDate
}

const loading = ref(false)

</script>
<style scoped>
</style>